<template>
  <div id="components-modal-demo-position">
    <a-modal
      centered
      :visible="true"
      title="修改手机号码"
      :footer="null"
      @cancel="cancel"
      class="addForm"
    >
      <a-button @click="addEamil" class="mb20">添加手机号码</a-button>
      <a-form-model
        ref="ruleForm"
        class="joinForm"
        v-bind="layout"
        :model="item"
        v-for="(item, index) in phoneList"
        :key="index"
        :rules="rules"
      >
        <a-form-model-item
          ref="phone"
          :label="`手机号码${index + 1}`"
          prop="phone"
        >
          <div class="modalBox">
            <a-input
              :placeholder="`请输入手机号码${index + 1}`"
              v-model="item.phone"
            />
            <a-button @click="deleteEamil(index)" class="commonBtn"
              >删除手机号码</a-button
            >
          </div>
        </a-form-model-item>
      </a-form-model>
      <div class="btnClass">
        <a-button @click="cancel" class="cancel commonBtn">取消</a-button>
        <a-button type="primary" class="commonBtn" @click="confirmClick"
          >确认</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script>
var reg = new RegExp(
  '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$'
) // 校验手机号
import { editMessagePlatformNumber } from '@/api/messagePlatform'
export default {
  props: {
    phones: {
      type: Array,
      default: () => []
    },
    id: [String, Number]
  },
  data() {
    return {
      Visible: true,
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
      confirmDirty: false,
      phoneList: [],
      isCorrect: false,
      rules: {
        phone: [
          { required: true, message: '请确认手机号码格式正确!', trigger: 'blur' },
          {
            validator: (rule, val, callback) => {
              if (!reg.test(val)) {
                this.isCorrect = false
                callback(new Error('请确认手机号码格式正确!'))
              } else {
                this.isCorrect = true
                callback()
              }
            }
          }
        ],
      },
    }
  },
  watch: {
    phones: {  //prop合理化
      handler(nVal) {
        if (nVal) {
          this.phoneList = nVal
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    addEamil() {
      this.phoneList.push({ phone: '' })
    },
    deleteEamil(index) {
      this.phoneList.splice(index, 1)
    },
    handleCancel() {
      this.$emit('cancelVisible', false)
    },
    cancel() {
      this.$emit('cancel')
    },
    confirmClick() {
      if (this.phoneList.length === 0 || !this.isCorrect) return this.$message.warning('请完善信息!')
      const phones = this.phoneList.reduce((pre, cur) => {
        pre.push(cur.phone)
        return pre
      }, [])
      const params = {
        id: this.id,
        phones: phones.toString()
      }
      editMessagePlatformNumber(params).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功!')
          this.$emit('addSuccess')
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
